﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageBrowse.aspx.cs" Inherits="AS.FilePicker.ImageBrowse" %>
<%@ Register Assembly="FlashUpload" Namespace="FlashUpload" TagPrefix="FlashUpload" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head id="Head1" runat="server">
		<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.1)" />
		<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.1)" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Pragma" content="no-cache" />
		<title>Image Picker</title>
		<meta http-equiv="EXPIRES" content="0" />
		<link href="submodal.css" rel="stylesheet" type="text/css" />
		<link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
        <script src="jquery-1.3.2.js" type="text/javascript"></script>
        <script src="ui.core.js" type="text/javascript"></script>
        <script src="ui.draggable.js" type="text/javascript"></script>
        <script src="jquery.Jcrop.js" type="text/javascript"></script>
        <script src="submodalsource.js" type="text/javascript"></script>
		<link href="dialog.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="DialogHead.js"></script>

		<style type="text/css">	
			.row { HEIGHT: 22px }
			.cb { VERTICAL-ALIGN: middle }
			.itemimg { VERTICAL-ALIGN: middle }
			.editimg { VERTICAL-ALIGN: middle }
			.cell1 { VERTICAL-ALIGN: middle }
			.cell2 { VERTICAL-ALIGN: middle }
			.cell3 { PADDING-RIGHT: 4px; VERTICAL-ALIGN: middle; TEXT-ALIGN: right }
			.cb { }
		</style>
	</head>
	<body>
		<form runat="server" enctype="multipart/form-data" id="Form1"><div runat="server" id="ajaxdiv" style="padding:10px; width:100%">
			<!-- start hidden -->
			<input type="hidden" runat="server" id="hiddenDirectory" name="hiddenDirectory" />
			<input type="hidden" runat="server" id="hiddenFile" name="hiddenFile" /> 
			<!-- end hidden -->
			<table border="0" cellspacing="0" cellpadding="0" width="100%">
				<tr>
					<td style="width:20">
<asp:Image id="Image1" Runat="server" ImageUrl="images/openfolder.gif"></asp:Image>
					</td>
					<td class="normal" style="width:260px">
<asp:Label Runat="server" id="FolderDescription"></asp:Label>
                    <div id="div_upload" style="display:none;position:absolute;BORDER: 1.5pt inset;background-color:#F7F3F7;top:40px;z-index:10000>
					    <FlashUpload:FlashUpload ID="flashUpload" runat="server" Width="575" Height="375"
                            UploadPage="Upload.axd" OnUploadComplete="UploadComplete()" 
                            FileTypeDescription="*.bmp;*.mp3;*.gif;*.mp4;*.jpg;*.jpeg;*.jpe;*.png;*.avi;*.tiff;*.tif;*.flv;*.swf" 
                            FileTypes="*.bmp;*.mp3;*.gif;*.mp4;*.jpg;*.jpeg;*.jpe;*.png;*.avi;*.tiff;*.tif;*.flv;*.swf" 
                            UploadFileSizeLimit="1100000000" TotalUploadSizeLimit="1100000000" />
					</div>
					</td>
					<td valign="top">
					<img id="Upload" alt="Upload files" style="cursor:pointer" title="Upload files"
							src="images/publish.gif" onclick="Upload_click()" />
<img id="CreateDir" alt="Create directory" style="cursor:pointer" title="Create directory"
							src="images/newfolder.gif" onclick="CreateDir_click()" />
							
<img id="Copy" alt="Copy" style="cursor:pointer" title="Copy"
							src="images/copy.gif" onclick="Copy_click()" />
							
<img id="Move" alt="Move" style="cursor:pointer" title="Move"
							src="images/move.gif" onclick="Move_click()" />
							
<img class="dialogButton" style="cursor:pointer" 
onclick="return ImageEditor()"
id="img_ImageEditor" src="images/imageeditor.gif" alt="Image Editor" title="Image Editor" />
                        
                    </td>
                    <td>
                        File Url&nbsp;&nbsp;<input type="text" id="TargetUrl" size="43" name="TargetUrl" runat="server" />&nbsp;&nbsp;
                        
					</td>
					<td style="display:none">
					    Width&nbsp;&nbsp;<input type="text" id="CW" style="width:20px" readonly="readonly" />&nbsp;&nbsp;
                        Height&nbsp;&nbsp;<input type="text" id="CH" style="width:20px" readonly="readonly" />
					</td>
					<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
				</tr>
			</table>
			<table border="0" cellspacing="0" cellpadding="0" width="100%">
				<tr>
					<td valign="top" style="white-space:nowrap; width:360px;overflow:visible;">
						<div style="BORDER: 1.5pt inset;  VERTICAL-ALIGN: middle; OVERFLOW: auto; WIDTH: 360px; HEIGHT: 250px; Padding:0px; BACKGROUND-COLOR: white">
							<asp:Table id="FoldersAndFiles" Runat="server" CellSpacing="1" CellPadding="0" Width="100%"
								CssClass="sortable">
								<asp:TableRow BackColor="#f0f0f0">
									<asp:TableHeaderCell Width="16px">
										<asp:ImageButton id="Delete" Runat="server" AlternateText="Deletefiles" ImageUrl="images/s_cut.gif"
											OnClick="Delete_Click" OnClientClick="return deleteFile()" />
									</asp:TableHeaderCell>
									<asp:TableHeaderCell Width="16px">
										<asp:ImageButton id="DoRefresh" Runat="server" AlternateText="Refresh" ImageUrl="images/s_refresh.gif"
											OnClick="DoRefresh_Click" />
									</asp:TableHeaderCell>
									<asp:TableHeaderCell id="name_Cell" Wrap="True" Width="145px" CssClass="filelistHeadCol" Font-Bold="False">Name</asp:TableHeaderCell>
									<asp:TableHeaderCell id="size_Cell" Width="62px" CssClass="filelistHeadCol" Font-Bold="False">Count/Size</asp:TableHeaderCell>
									<asp:TableHeaderCell id="op_Cell" Width="16px">&nbsp;</asp:TableHeaderCell>
									<asp:TableHeaderCell id="op_space" Width="1px"></asp:TableHeaderCell>
								</asp:TableRow>
							</asp:Table>
						</div>						
						<table border="0" cellspacing="0" cellpadding="0" width="100%">
				<tr style="display:none">
					
					<td valign="top" style="background-color:#ffffff">
                                        <asp:FileUpload ID="fuImg" runat="server" />&nbsp;&nbsp;<asp:Button style="position:relative\9;top:2px\9;" ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />

					</td>
				</tr>
				<tr>
				    <td>
				        <div style="margin: 5px 0;">
            <fieldset style="padding:5px 0px 5px 0px">
				<legend>Crop image</legend>
				<span class="requiresjcrop">
				    Width <input type="text" id="txtWidth" style="width:20px" runat="server" />&nbsp;
				    Height <input type="text" id="txtHeight" style="width:20px" runat="server" />&nbsp;
					<button id="setSelect">setSelect</button>
					<button id="animateTo" style="display:none">animateTo</button>
					<button id="release" style="display:none;">Release</button>
					<button id="disable" style="display:none;">Disable</button>&nbsp;
					Crop quality <asp:TextBox ID="txtQuatity" runat="server" Text="100" Width="20px"></asp:TextBox> %&nbsp;
                <asp:Button ID="btnCrop" runat="server" style="font-weight:bold;padding:1px;"
                        OnClientClick="return checkFiletoCrop();" ToolTip="Crop image"
                        Text="Crop" OnClick="btnCrop_Click" />
				</span>

				<button id="enable" style="display:none;">Re-Enable</button>
				<button id="unhook" style="display:none;">Destroy!</button>
				<button id="rehook" style="display:none;">Attach Jcrop</button>
            </fieldset>
			</div>
			<div>
                
			</div>

			<fieldset class="optdual requiresjcrop">
				<legend>Crop Option</legend>
				<div class="optlist offset">
					<label><input type="checkbox" id="ar_lock" />Aspect ratio</label>
					<label><input type="checkbox" id="size_lock" />minSize/maxSize setting</label>
					<label style="display:none;"><input type="checkbox" id="bg_swap" />Change outerImage</label>
				</div>
				<div class="optlist">
					<label><input type="checkbox" id="can_click" />Allow new selections</label>
					<label><input type="checkbox" id="can_move" />Selection can be moved</label>
					<label><input type="checkbox" id="can_size" />Resizable</label>
				</div>
			</fieldset>
				    </td>
				</tr>
				<tr>
					
					<td valign="top">
						<div style="text-align:center;padding-top:10px;">
                        <asp:Button ID="Button3" runat="server"
                        OnClientClick="return checkCrop()"
                         Text="   OK   " />
                        
                        &nbsp;
                        <input type="button" value="   Cancel  " onclick="return close_Frame()" id="Button4" />&nbsp;&nbsp;
                        <span style="color:Red;"><asp:Literal ID="ltrStatus" runat="server"></asp:Literal></span>
						</div>
					</td>
				</tr>
			</table>
						
					</td>
					<td width="2px"></td>
					<td valign="top">
						<div style="BORDER: 1.5pt inset; VERTICAL-ALIGN: top; OVERFLOW: auto; WIDTH: 400px; HEIGHT: 400px; BACKGROUND-COLOR: white; TEXT-ALIGN: center;z-index:-1000">
							<div id="divpreview" style="BACKGROUND-COLOR: white;OVERFLOW: auto; WIDTH: 400px; HEIGHT: 400px;">
							    <img id="img_demo" alt="" src="images/1x1.gif" />
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="3" style="height:2">
					</td>
				</tr>
			</table>
			
			</div>
            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" style="display:none">
            </asp:DropDownList>
            <asp:HiddenField ID="X" runat="server" />

            <asp:HiddenField ID="Y" runat="server" />

            <asp:HiddenField ID="W" runat="server" />

            <asp:HiddenField ID="H" runat="server" />
		</form>
		
	</body>
	<script type="text/javascript" src="Dialog_InsertImage.js"></script>
</html>

<script type="text/javascript">
    function updateCoords(c)
    {
	    $('#X').val(c.x);
    	$('#Y').val(c.y);
    	$('#W').val(c.w);
    	$('#H').val(c.h);
//    	$('#CW').val(c.w);
//    	$('#CH').val(c.h);
    };
//    
    function checkCrop(){
        var imgUrl=document.getElementById("TargetUrl").value;
        if(imgUrl==""){
            alert("You must choose the image !");
            return false;
        }
        else{
            if(checkImageCrop()){
                try{
                    window.top.document.getElementById("<%=txtID%>").value = imgUrl;
                    window.top.document.getElementById("ImgPicker_<%=txtID%>").src = imgUrl;
                    window.top.document.getElementById("DivImgPicker_<%=txtID%>").style.display = "none";
                    window.top.hidePopWin(false);
                }
                catch(err){
                    try{
                        window.parent.document.getElementById("<%=txtID%>").value = imgUrl;
                        window.parent.document.getElementById("ImgPicker_<%=txtID%>").src = imgUrl;
                        window.parent.document.getElementById("DivImgPicker_<%=txtID%>").style.display = "none";
                        window.parent.hidePopWin(false);
                    }
                    catch(err1){
                        window.opener.document.getElementById("<%=txtID%>").value = imgUrl;
                        window.opener.document.getElementById("ImgPicker_<%=txtID%>").src = imgUrl;
                        window.opener.document.getElementById("DivImgPicker_<%=txtID%>").style.display = "none";
                        window.close();
                    }
                }
            }
            else
                alert("The image is not valid \nPlease choose the other or crop the image first !");
        }
        return false;
    }
    
    function close_Frame(){
        try{
            window.top.document.getElementById("DivImgPicker_<%=txtID%>").style.display = "none";
            window.top.hidePopWin(false);
        }
        catch(message){
            try{
                window.top.document.getElementById("DivImgPicker_<%=txtID%>").style.display = "none";
                window.parent.hidePopWin(false);
            }
            catch(message1){
                window.close();
            }
        };
        return false;
    }
    
    function checkImageCrop(){
        var imgObj=document.getElementById("img_demo");
        
        if(<%=ResizeMode%> == 0){
            if((imgObj.width == <%=ImageWidth%>) && (imgObj.height == <%=ImageHeight%>))
                return true;
            else
                return false;
        }
        
        if(<%=ResizeMode%> == 2){
            if(imgObj.width <= <%=ImageWidth%>)
                return true;
            else
                return false;
        }
        
        if(<%=ResizeMode%> == 3){
            if(imgObj.height <= <%=ImageHeight%>)
                return true;
            else
                return false;
        }
        
        if(<%=ResizeMode%> == 4){
            if((imgObj.width <= <%=ImageWidth%>) && (imgObj.height <= <%=ImageHeight%>))
                return true;
            else
                return false;
        }
        
        return true;
    }
    
    function deleteFile(){
        var frm1 = document.forms[0];
        var arg="";
        for (i = 0; i < frm1.elements.length; i++)
        {
            if (frm1.elements[i].type == "checkbox")
            {   
                var chk = frm1.elements[i];
                if(chk.checked){                  
                    var checkName = frm1.elements[i].name;                   
                    if(checkName.indexOf("row")!=-1)
                    {
                        var idRow = checkName.split("$")[0];
                        var row = document.getElementById(idRow);
                        var objUrl = row.getAttribute("path");
                        if(arg=="")
                            arg = objUrl;
                        else
                            arg = arg + "," + objUrl;
                    }
                }
            }
        }
        if(arg=="")
            alert("You must choose the files or the folders to delete !");
        else{
            if(confirm("Are you sure to delete ?")){
                for (i = 0; i < frm1.elements.length; i++)
                {
                    if (frm1.elements[i].type == "checkbox")
                    {   
                        var chk = frm1.elements[i];
                        chk.checked = false;
                    }
                }
                __doPostBack("xoafile",arg);
            }
        }
        return false;
    }
    
    function checkFiletoCrop(){
        var imgUrl=document.getElementById("TargetUrl").value;
        
        var imgObj=document.getElementById("img_demo");
        
        if(imgUrl=="" || imgUrl=="images/1x1.gif")
        {
            alert("You must choose the image to crop !");
            return false;
        }
        else{
            if($('#W').val() == "" || $('#H').val() == ""){
                alert("You must select the part of the image to crop !");
                return false;
            }
        }
            
        if(<%=ResizeMode%> == 0){
            if((imgObj.width <= <%=ImageWidth%>) && (imgObj.height <= <%=ImageHeight%>))
            {
                alert("The image need not to be cropped !");
                return false;
            }
            else if((imgObj.width/imgObj.height) == (<%=ImageWidth%>/<%=ImageHeight%>))
            {
                alert("The image need not to be cropped !");
                return false;
            }
            else
                return confirm("Are you sure to crop the image ?");
        }
        
        if(<%=ResizeMode%> == 2){
            if(imgObj.width <= <%=ImageWidth%>)
            {
                alert("The image need not to be cropped !");
                return false;
            }
            else
                return confirm("Are you sure to crop the image ?");
        }
        
        if(<%=ResizeMode%> == 3){
            if(imgObj.height <= <%=ImageHeight%>)
            {
                alert("The image need not to be cropped !");
                return false;
            }
            else
                return confirm("Are you sure to crop the image ?");
        }
        
        if(<%=ResizeMode%> == 4){
            if((imgObj.width <= <%=ImageWidth%>) && (imgObj.height <= <%=ImageHeight%>))
            {
                alert("The image need not to be cropped !");
                return false;
            }
            else
                return confirm("Are you sure to crop the image ?");
        }
        
        return confirm("Are you sure to crop the image ?");
    }
    function ImageEditor(){
        var imgUrl=document.getElementById("TargetUrl").value;
        
        var imgObj=document.getElementById("img_demo");
        
        if(imgUrl=="" || imgUrl=="images/1x1.gif")
        {
            alert("You must choose the image to crop !");
            return false;
        }
        
        var wImg = imgObj.width + 40;
        var hImg = imgObj.height + 50;
        var left   = (screen.width  - wImg)/2;
        var top    = (screen.height - hImg)/2;
        window.open('ImageEditor.aspx?url='+imgUrl+'&fWidth='+wImg+'&fHeight='+hImg+'&ssID=<%=ssID %>&ImageWidth=<%=ImageWidth %>&ImageHeight=<%=ImageHeight %>&Resizable=<%=Resizable %>&ResizeMode=<%=ResizeMode %>','mywindow','width='+wImg+',height='+hImg+',top='+top+',left='+left+',location=0,status=0,scrollbars=1,toolbar=0,resizable=1,menubar=0,titlebar=0')

        return false;
    }
    function Refresh_onclose(t){
        __doPostBack("refresh",t) ;
    }
    
    function Move_click(){
	var frm1 = document.forms[0];
	var arg="";
	for (i = 0; i < frm1.elements.length; i++)
	{
		if (frm1.elements[i].type == "checkbox")
		{   
			var chk = frm1.elements[i];
			if(chk.checked){                  
				var checkName = frm1.elements[i].name;                   
				if(checkName.indexOf("row")!=-1)
				{
					var idRow = checkName.split("$")[0];
					var row = document.getElementById(idRow);
					var objUrl = row.getAttribute("path");
					if(arg=="")
						arg = objUrl;
					else
						arg = arg + "," + objUrl;
				}
			}
		}
	}
	if(arg=="")
		alert("You must choose the files or the folders to move !");
	else{
		if(confirm("Are you sure to move ?")){
			for (i = 0; i < frm1.elements.length; i++)
			{
				if (frm1.elements[i].type == "checkbox")
				{   
					var chk = frm1.elements[i];
					chk.checked = false;
				}
			}
			
			var dirName = prompt("Specify the relative path to move to : ", "<%=rootDir %>");
			if(dirName==null)
				return;
			else if(dirName=="")
				alert("You must input the relative path to move to !");
			else{
				arg = dirName + "," + arg;
				__doPostBack("move",arg) ;
			}
		}
	}
	
	
}  ; 

function Copy_click(){
	var frm1 = document.forms[0];
	var arg="";
	for (i = 0; i < frm1.elements.length; i++)
	{
		if (frm1.elements[i].type == "checkbox")
		{   
			var chk = frm1.elements[i];
			if(chk.checked){                  
				var checkName = frm1.elements[i].name;                   
				if(checkName.indexOf("row")!=-1)
				{
					var idRow = checkName.split("$")[0];
					var row = document.getElementById(idRow);
					var objUrl = row.getAttribute("path");
					if(arg=="")
						arg = objUrl;
					else
						arg = arg + "," + objUrl;
				}
			}
		}
	}
	if(arg=="")
		alert("You must choose the files or folders to copy !");
	else{
		for (i = 0; i < frm1.elements.length; i++)
		{
			if (frm1.elements[i].type == "checkbox")
			{   
				var chk = frm1.elements[i];
				chk.checked = false;
			}
		}
		
		var dirName = prompt("Specify the relative path to copy to : ", "<%=rootDir %>");
		if(dirName==null)
			return;
		else if(dirName=="")
			alert("You must input the relative path to copy to !");
		else{
			arg = dirName + "," + arg;
			__doPostBack("copy",arg) ;
		}
	}
}  ; 

function UploadComplete(){
    alert("Upload completed");
    __doPostBack("refresh",'') ;
}
function Upload_click(){
    $("#div_upload").animate({"height": "toggle"}, { duration: 1000 });
}


$(window).load(function(){

	var jcrop_api;
	var i, ac;

	initJcrop();
	
	function initJcrop()//{{{
	{

		jcrop_api = $.Jcrop('#img_demo');

		$('#can_click,#can_move,#can_size')
			.attr('checked','checked');

		$('#bg_swap').attr('checked',false);
		$('#size_lock').attr('checked',true);
		$('#ar_lock').attr('checked',!<%=Resizable %>);

	};
	//}}}

	// A handler to kill the action
	// Probably not necessary, but I like it
	
	//fill anh
	var imgUrl = document.getElementById("TargetUrl").value;
	if(imgUrl != ""){
	    document.getElementById("divpreview").innerHTML = '<img id="img_demo" alt="" src="' + imgUrl + '" />';
	    var FoldersAndFiles=document.getElementById("FoldersAndFiles");
	    var Ox364=FoldersAndFiles.getElementsByTagName(Chh_Arr[0x22]);
	    for(var i=0x0;i<Ox364[Chh_Arr[0x23]];i++)
        {
            var row=Ox364[i]; 
            var objUrl = row.getAttribute("Url");
            if(imgUrl == objUrl){
                row.bgColor = "eeeeee";
                row.focus();
                break;
            }
        }
	}
	
	//disable crop button
	$('#btnCrop').attr("disabled", true);
	
	function nothing(e)
	{
		e.stopPropagation();
		e.preventDefault();
		return false;
	};

	// Use the API to find cropping dimensions
	// Then generate a random selection
	// This function is used by setSelect and animateTo buttons
	// Mainly for demonstration purposes
	function getRandom() {
		var dim = jcrop_api.getBounds();
		var rong = Math.round(Math.random() * dim[0]);
		var dai = Math.round(Math.random() * dim[1]);
		if(document.getElementById("txtWidth").value != "0"){

		    rong = document.getElementById("txtWidth").value;
		}
		if(document.getElementById("txtHeight").value != "0"){
		    dai = document.getElementById("txtHeight").value;
		}
		
        $('#X').val(0);
        $('#Y').val(0);
        $('#W').val(rong);
        $('#H').val(dai);
//        $('#CW').val(rong);
//        $('#CH').val(dai);
		
		return [
			0,
			0,
			rong,
			dai
		];
	};

	// Attach interface buttons
	// This may appear to be a lot of code but it's simple stuff

	$('#setSelect').click(function(e) {
		// Sets a random selection
		if(document.getElementById("TargetUrl").value == ""){
		    alert("You must choose the images first !");
		    return false;
		}
		else{
		    var scale = 0;
		    if(!<%=Resizable %>){
		        try{
		            scale = document.getElementById("txtWidth").value / document.getElementById("txtHeight").value;
		        } catch(err2){}
		    }
		    jcrop_api = $.Jcrop('#img_demo',{ setSelect:   getRandom() , onSelect:    updateCoords , 
		    aspectRatio: scale ,minSize: [ document.getElementById("txtWidth").value, document.getElementById("txtHeight").value ], 
		    maxSize: [ $('#img_demo').width(), $('#img_demo').height() ]});
//		    jcrop_api.setSelect(getRandom());
//		    jcrop_api.onSelect(updateCoords(e));
		    $('#setSelect').hide();
		    $('#release').show();
		    $('#btnCrop').attr("disabled", false);
		    return false;
		}
	});

	$('#animateTo').click(function(e) {
		// Animates to a random selection
		jcrop_api.animateTo(getRandom());
	});

	$('#release').click(function(e) {
		// Release method clears the selection
		//jcrop_api.release();
		var html = "";
		html += '<img id="img_demo" alt="" src="' + document.getElementById("TargetUrl").value + '" />' ;
		document.getElementById("divpreview").innerHTML = html;
		$('#setSelect').show();
		$('#release').hide();
		$('#btnCrop').attr("disabled", true);
		return false;
	});

	$('#disable').click(function(e) {
		jcrop_api.disable();

		$('#enable').show();
		$('.requiresjcrop').hide();
	});

	$('#enable').click(function(e) {
		jcrop_api.enable();

		$('#enable').hide();
		$('.requiresjcrop').show();
	});

	$('#rehook').click(function(e) {
		initJcrop();
		$('#rehook,#enable').hide();
		$('#unhook,.requiresjcrop').show();
		return nothing(e);
	});

	$('#unhook').click(function(e) {
		jcrop_api.destroy();

		$('#unhook,#enable,.requiresjcrop').hide();
		$('#rehook').show();
		return nothing(e);
	});

	// The checkboxes simply set options based on it's checked value
	// Options are changed by passing a new options object

	// Also, to prevent strange behavior, they are initially checked
	// This matches the default initial state of Jcrop

	$('#can_click').change(function(e) {
		jcrop_api.setOptions({ allowSelect: !!this.checked });
		jcrop_api.focus();
	});

	$('#can_move').change(function(e) {
		jcrop_api.setOptions({ allowMove: !!this.checked });
		jcrop_api.focus();
	});

	$('#can_size').change(function(e) {
		jcrop_api.setOptions({ allowResize: !!this.checked });
		jcrop_api.focus();
	});

	$('#ar_lock').change(function(e) {
		jcrop_api.setOptions(this.checked? { aspectRatio: 4/3 }: { aspectRatio: 0 });
		jcrop_api.focus();
	});
	$('#size_lock').change(function(e) {
		jcrop_api.setOptions(this.checked? {
			minSize: [ 80, 80 ],
			maxSize: [ 350, 350 ]
		}: {
			minSize: [ 0, 0 ],
			maxSize: [ 0, 0 ]
		});
		jcrop_api.focus();
	});
	$('#bg_swap').change(function(e) {
		jcrop_api.setOptions( this.checked? {
			outerImage: 'demo_files/sagomod.png',
			bgOpacity: 1
		}: {
			outerImage: 'demo_files/sago.jpg',
			bgOpacity: .6
		});
		jcrop_api.release();
	});

});


</script>

